<template>
  <div>
    <el-form class="model-form" label-width="120px" :model="property">
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="property.name"
          size="small"
          auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="标识符" prop="identifier">
        <el-input
          v-model="property.identifier"
          size="small"
          auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="数据类型">
        <el-select
          size="small"
          v-model="property.dataType.type"
          placeholder="请选择数据类型"
        >
          <el-option label="int32" value="int32"></el-option>
          <el-option label="float" value="float"></el-option>
          <el-option label="bool" value="bool"></el-option>
          <el-option label="enum" value="enum"></el-option>
          <el-option label="text" value="text"></el-option>
          <el-option label="date" value="date"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="isSelectType('int32')">
        <el-col :span="3"> 取值范围 </el-col>
        <el-col :span="5">
          <el-input
            size="mini"
            v-model="property.dataType.specs.min"
            placeholder="最小值"
          >
          </el-input>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="5">
          <el-input
            size="mini"
            v-model="property.dataType.specs.max"
            placeholder="最大值"
          >
          </el-input>
        </el-col>
        <el-col :span="10"></el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('float')">
        <el-col :span="3"> 取值范围 </el-col>
        <el-col :span="3">
          <el-input
            size="mini"
            v-model="property.dataType.specs.min"
            placeholder="最小值"
          >
          </el-input>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="3">
          <el-input
            size="mini"
            v-model="property.dataType.specs.max"
            placeholder="最大值"
          >
          </el-input>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="10">
          <el-input
            size="mini"
            v-model="property.dataType.specs.precision"
            placeholder="精度"
            style="margin-top: 6px"
          >
            <template slot="append">(保留小数位,实际数据以int存储)</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('bool')">
        <el-col :span="3">布尔值</el-col>
        <el-col :span="1"> 0 - </el-col>
        <el-col :span="3">
          <el-input size="mini" v-model="boolItem._true" placeholder="如:否">
          </el-input>
        </el-col>
        <el-col :span="1">&nbsp; </el-col>
        <el-col :span="1"> 1 - </el-col>
        <el-col :span="3">
          <el-input size="mini" v-model="boolItem._false" placeholder="如:是">
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('enum')">
        <el-col v-for="ei in enumItems" :span="24" :key="ei.value">
          <el-col :span="3"> 枚举值 </el-col>
          <el-col :span="3">
            <el-input size="mini" v-model="ei.value" placeholder="如:0">
            </el-input>
          </el-col>
          <el-col :span="2"> &nbsp; </el-col>
          <el-col :span="3"> 枚举描述 </el-col>
          <el-col :span="5">
            <el-input size="mini" v-model="ei.name"> </el-input>
          </el-col>
          <el-col :span="1"> &nbsp; </el-col>
          <el-col :span="2">
            <el-button type="danger" size="mini" plain @click="delEnum(ei)"
              >删除</el-button
            >
          </el-col>
        </el-col>
        <el-button @click="addEnumItem()" type="primary" size="mini" plain
          >添加</el-button
        >
      </el-form-item>
      <el-form-item v-if="isSelectType('text')">
        <el-col :span="3">数据长度</el-col>
        <el-col :span="3">
          <el-input
            size="mini"
            v-model="property.dataType.specs.length"
            placeholder="数据长度"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item v-if="isSelectType('date')">
        String类型的UTC时间戳（毫秒）
      </el-form-item>
      <el-form-item v-if="isProperty" label="读写" prop="accessMode">
        <el-radio-group v-model="property.accessMode">
          <el-radio label="rw">读写</el-radio>
          <el-radio label="r">只读</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
export default {
  name: "PropertyModel",
  props: {
    property: null,
    enumItems: {},
    boolItem: {},
    isProperty: {
      typeof: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {};
  },
  // 注册组件
  components: {},
  created() {},
  methods: {
    isSelectType(type) {
      return type == this.property.dataType.type;
      // return true;
    },
    addEnumItem() {
      this.enumItems.push({});
    },
    delEnum(ei) {
      let idx = this.enumItems.findIndex((e) => e.value == ei.value);
      this.enumItems.splice(idx, 1);
    },
  },
};
</script>

<style>
.model-form .line {
  text-align: center;
}
</style>
